<template>
    <div class="ui special cards">
        <div class="card">
            <audio controls="controls" id="Original_player" hidden>

            </audio>
            <img style="width:3.5vw;height: 3.5vw;padding: 0px;margin: 0px" src="">
            <div class="bar" style="width: 100%;">
                <div id="music_line" style="background-color: rebeccapurple">{{progressBar}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Music",
        data() {
            return {}
        },
        created() {

        },
        computed: {
            progressBar: function () {
                $('#bar_line').animate({width: this.second * 100 / 60 + '%'});
                return '';
            }
        },

        methods: {}
    }


</script>

<style scoped>
    .card {
        box-shadow: 2px 3px 6px #bababc !important;
    }

    #music_line {
        background: white;
        height: 3px;
        width: 10%;
        border-bottom-left-radius: inherit
    }


</style>
